<template>
   <div class="notes-tpl">
      <table border="1" align="center" width="400px">
          <tr><td><h2>记事本</h2></td><td colspan="1"> <input v-model="item" @keydown.enter="add()" /></td></tr>
          <tr v-if="title">
              <th>序号</th><th>内容</th><th>操作</th>
          </tr>
          <tr v-for="(value,index) in notes" :key="index">
          <td>{{index+1}}</td> <td>{{value}}</td> <td><button @click="remove(index)">删除</button></td>
      </tr>
      <tr v-if="title"><td colspan="3"><button @click="removeAll">清除全部</button></td></tr>
      </table>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
export default {
  name: 'NotesTpl',
  setup () {
    const state = reactive({
      item: '',
      notes: []
    })
    const add = () => {
      state.notes.push(state.item)
      state.item = ''
    }
    const remove = (index) => {
      state.notes.splice(index, 1)
    }
    const title = computed(() => {
      return state.notes.length > 0
    })
    const removeAll = () => {
      state.notes = []
    }

    return {
      ...toRefs(state),
      add,
      remove,
      title,
      removeAll
    }
  }
}

</script>
<style scoped lang='scss'>

</style>
